<template>
  <div class="skeleton" :class="{ skeletonAvatar: avatar }"></div>
</template>

<script>
export default {
  name: "Skeleton",
  props: {
    avatar: Boolean,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.skeleton {
  height: 15px;
  margin-top: 15px;
  position: relative;
  animation: loading 2s ease infinite;
  -webkit-animation: loading 2s ease infinite;

  background-image: linear-gradient(
    90deg,
    #f2f3f5 25%,
    #e6e6e6 37%,
    #f2f3f5 63%
  );
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(25%, #f2f3f5),
    color-stop(37%, #e6e6e6),
    color-stop(63%, #f2f3f5)
  );
  background-size: 400% 100%;

  &.skeletonAvatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}

@keyframes loading {
  0% {
    background-position: 100% 50%;
  }

  to {
    background-position: 0 50%;
  }
}

@-webkit-keyframes loading {
  0% {
    background-position: 100% 50%;
  }

  to {
    background-position: 0 50%;
  }
}
</style>
